<template>
  <!-- 首页 -->
  <view class="pageIndex">
    <!-- 菜单 -->
    <view class="headerBg">
      <image class="image1" src="../../static/image/home/home1.jpg" mode="" />
      <!-- 跳转三务公开 -->
      <view class="affairCls" @click="gotoCaiWu('/pageContent/affair/affairHall', 0)"></view>
      <!-- 前往艾溪湖管理处介绍页 -->
      <view class="introducCls" @click="gotoCaiWu('/pageContent/introduction/introductionDetails', 0)"></view>
    </view>

    <view class="contents">
      <view class="title">党政新闻</view>
      <view class="u-demo-block">
        <u-swiper :list="dtNewsVoList" keyName="img" @click="gotoOtherUrl" imgMode="scaleToFill" circular @change="currentCli" :autoplay="false">
          <view slot="indicator" class="indicator">
            <view class="indicator__dot" v-for="(item, index) in dtNewsVoList" :key="index" :class="[index === current && 'indicator__dot--active']"> </view>
          </view>
        </u-swiper>
      </view>

      <view class="tabList">
        <view class="tabItem" v-for="(v, i) in tabArr" :key="i" @click="gotoCaiWu(v.webUrl, v.isWebView)">
          <image class="image2" :src="v.srcUrl" mode="" />
          <text class="text">{{ v.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabArr: [
        {
          srcUrl: '../../static/image/home/home2.jpg',
          webUrl: '/pageContent/introduction/entrance',
          isWebView: 0,
          name: '魅力艾溪',
        },
        {
          srcUrl: '../../static/image/home/home3.jpg',
          webUrl: '/pageContent/articleTrends/work',
          isWebView: 0,
          name: '工作动态',
        },
        {
          srcUrl: '../../static/image/home/home4.jpg',
          webUrl: '/pageContent/interaction/messageBoard',
          isWebView: 0,
          name: '政务咨询',
        },
        {
          srcUrl: '../../static/image/home/home5.jpg',
          webUrl: '/pageContent/guide/guideHall',
          isWebView: 0,
          name: '办事指南',
        },
        {
          srcUrl: '../../static/image/home/home6.jpg',
          webUrl: 'http://nchdz.nc.gov.cn/ncgxq/yhzc/common_list.shtml',
          isWebView: 1,
          name: '政策查询',
        },
        {
          srcUrl: '../../static/image/home/home7.jpg',
          webUrl: '/pageContent/life/lifeServices',
          isWebView: 0,
          name: '生活服务',
        },
        {
          srcUrl: '../../static/image/home/home8.jpg',
          webUrl: '/pageContent/affair/affairHall',
          isWebView: 0,
          name: '三务公开',
        },
        {
          srcUrl: '../../static/image/home/home9.jpg',
          webUrl: '/pageContent/articleTrends/news',
          isWebView: 0,
          name: '党建阵地',
        },
        {
          srcUrl: '../../static/image/home/home10.jpg',
          webUrl: '/pageContent/interaction/contentHall',
          isWebView: 0,
          name: '互动交流',
        },
      ],
      dtNewsVoList: [],
    }
  },
  created() {
    this.getNewsFind()
  },
  methods: {
    currentCli(e) {
      this.current = e.current
    },
    gotoOtherUrl(e) {
      var a = document.createElement('a')
      a.setAttribute('href', this.dtNewsVoList[e].content)
      a.setAttribute('target', '_blank')
      a.setAttribute('id', 'startTelMedicine')
      // 防止反复添加
      if (document.getElementById('startTelMedicine')) {
        document.body.removeChild(document.getElementById('startTelMedicine'))
      }
      document.body.appendChild(a)
      a.click()
    },
    getNewsFind() {
      this.$https
        .post({
          url: '/axh/articleManage/findArticleList',
          data: {
            oneClassifyId: 122,
            twoClassifyId: '',
            threeClassifyId: '',
            fourClassifyId: '',
            page: 1,
            limit: 200,
            title: '',
            status: 1,
            phoneAuth: 1,
          },
        })
        .then((data) => {
          this.dtNewsVoList = data.result.dtNewsVoList
        })
    },
    gotoCaiWu(url, faly) {
      if (faly == 1) {
        this.gotoWebview(url)
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
  },
}
</script>

<style lang="scss">
.pageIndex {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 80rpx;

  .headerBg {
    position: relative;
    .image1 {
      width: 100%;
      height: 412rpx;
    }
    .affairCls {
      position: absolute;
      top: 30rpx;
      right: 36rpx;
      width: 220rpx;
      height: 60rpx;
      border-radius: 50rpx;
    }
    .introducCls {
      position: absolute;
      top: 232rpx;
      left: 40rpx;
      width: 670rpx;
      height: 112rpx;
    }
  }

  .contents {
    padding: 0 32rpx;
    .title {
      font-size: 34rpx;
      color: #333;
      font-weight: 600;
      margin-bottom: 24rpx;
    }
  }
  .tabList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 6rpx 0rpx 20rpx 2rpx rgb(224, 224, 224);
    border-radius: 8rpx;
    padding: 24rpx 0;
    .tabItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 228rpx;
      padding: 0 24rpx 26rpx 24rpx;
      .image2 {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 8rpx;
      }
      .text {
        font-size: 26rpx;
      }
    }
  }
  .u-demo-block {
    margin-bottom: 32rpx;
    .indicator {
      @include flex(row);
      justify-content: center;

      &__dot {
        height: 6px;
        width: 6px;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5px;
        transition: background-color 0.3s;

        &--active {
          background-color: #ffffff;
        }
      }
    }
  }
}
</style>
